<template>
  <view class="page" @scroll="handleScroll">
    <u-gap height="30"></u-gap>
    <view class="tabVue margin0">
      <u-subsection
        :list="tabs"
        :current="current"
        button-color="#FFA0A0"
        height="88"
        active-color="#fff"
        bg-color="#f5f5f5"
        @change="change"
      ></u-subsection>
    </view>
    <scroll-view
      class="scroll-container"
      scroll-y
      @scrolltolower="handleScrollToLower"
    >
      <template v-if="current === 0">
        <view class="box margin30">
          <view class="title">生成兑换码</view>
          <view class="flex-between align-center margin20">
            <view class="ket"
              >AI视频兑换码 (可生成{{ redemptionCode.videoTotal || 0 }}个)</view
            >
            <view class="custom-number-box">
              <view class="plus" @click="decreaseNumberSp('spNumber')">
                <text class="symbol">-</text>
              </view>
              <input
                type="number"
                inputmode="numeric"
                v-model="spNumber"
                disabled
              />
              <view class="plus" @click="increaseSp('spNumber')">
                <text class="symbol">+</text>
              </view>
            </view>
          </view>
          <view class="flex-between align-center margin20">
            <view class="ket"
              >AI微信兑换码 (可生成{{
                redemptionCode.wechatTotal || 0
              }}个)</view
            >
            <view style="z-index: 999">
              <view class="custom-number-box">
                <view class="plus" @click="decreaseNumberWx('wxNumber')">
                  <text class="symbol">-</text>
                </view>
                <input
                  type="number"
                  inputmode="numeric"
                  v-model="wxNumber"
                  disabled
                />
                <view class="plus" @click="increaseWx('wxNumber')">
                  <text class="symbol">+</text>
                </view>
              </view>
            </view>
          </view>
          <view
            class="btn margin30"
            @click="generateRedemptionCode()"
            v-if="!isGenerating"
            >生成</view
          >
          <view class="btn margin30" v-else>生成</view>
        </view>
        <!-- <view class="flex-between margin30 padding-row30">
          <view
            class="info flex-between flex-column align-center padding-column25"
          >
            <text style="color: #000; font-weight: 600; font-size: 32rpx"
              >{{
                redemptionCode.videoTotal
                  ? redemptionCode.videoUsed + " / " + redemptionCode.videoTotal
                  : "0 / 0"
              }}
            </text>
            <text style="color: #5f6671">已使用AI视频兑换码</text>
          </view>
          <view
            class="info flex-between flex-column align-center padding-column25"
          >
            <text style="color: #000; font-weight: 600; font-size: 32rpx">{{
              redemptionCode.wechatTotal
                ? redemptionCode.wechatUsed + " / " + redemptionCode.wechatUsed
                : "0 / 0"
            }}</text>
            <text style="color: #5f6671">已使用AI微信兑换码</text>
          </view>
        </view> -->
        <view class="section margin30">
          <view class="searchVue flex align-center padding-row30">
            <u-icon name="search" size="36" color="#B3B7C0"></u-icon>
            <input
              type="text"
              placeholder="搜索兑换码"
              v-model="inputCode"
              @input="getSearchRedemptionCode()"
              class="search-input"
            />
              <image
                src="https://aiet-file-center.oss-cn-hangzhou.aliyuncs.com/shuziren/audio/叉72835.png"
                style="width: 22px; height: 22px;"
                @click="clearInput"
              ></image>
          </view>
          <u-dropdown class="u-dropdown">
            <u-dropdown-item
              v-model="activeState"
              :title="activeState"
              :options="options1"
              @change="getRedemptionCodeList()"
            ></u-dropdown-item>
            <u-dropdown-item
              v-model="redemptionType"
              :title="redemptionType"
              :options="options2"
              @change="getRedemptionCodeList()"
            ></u-dropdown-item>
          </u-dropdown>
          <view
            class="w100 flex-column align-center padding-column20"
            v-if="isEmpty"
          >
            <image
              src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/empty.png"
              style="width: 256rpx; height: 256rpx"
            ></image>
            <text style="color: #81868e">{{ describe }}</text>
          </view>
          <view
            class="item margin40 flex-between align-center"
            v-for="(item, index) in redemptionCodeList"
            :key="index"
          >
            <view class="card">
              <view class="flex-column">
                <view
                  class="flex align-center"
                  style="padding-top: 10px; margin-left: 27rpx"
                >
                  <view
                    :class="[
                      item.type === 'AI_WECHAT'
                        ? 'redemptionWeChatLabel'
                        : 'redemptionVideoLabel',
                    ]"
                    >{{ item.type === "AI_WECHAT" ? "微信" : "视频" }}</view
                  >
                  <view class="name">{{ item.code }}</view>
                  <view class="copy" @click="$tools.copy(item.code)">复制</view>
                  <view :class="['state', item.used ? 'used' : 'unused']">{{
                    item.used ? "已使用" : "未使用"
                  }}</view>
                </view>
              </view>
              <view
                style="height: 1px; background-color: #f1f1f1; margin: 10px 0"
              ></view>
              <view class="establish">
                <text class="text-item" v-if="item.used">{{
                  item.usedName
                }}</text>
                <text class="text-item" v-if="item.used">
                  {{ item.usedTime }}</text
                >
              </view>
              <view class="notes" v-if="item.remark">
                <text class="textremarks"> 备注：{{ item.remark }} </text>
                <img
                  @click="showInput(item)"
                  style="
                    width: 40rpx;
                    height: 40rpx;
                    margin-left: 15rpx;
                    margin-bottom: 5rpx;
                  "
                  src="https://aiet-file-center.oss-cn-hangzhou.aliyuncs.com/shuziren/audio/编辑268049.png "
                  alt=""
                />
              </view>
              <view class="notes" v-else
                >备注：
                <img
                  @click="showInput(item)"
                  style="
                    width: 40rpx;
                    height: 40rpx;
                    margin-left: 15rpx;
                    margin-bottom: 5rpx;
                  "
                  src="https://aiet-file-center.oss-cn-hangzhou.aliyuncs.com/shuziren/audio/编辑268049.png"
                  alt=""
                />
              </view>
            </view>
          </view>
          <view v-if="loading" class="loading">加载中...</view>
          <view
            v-if="noMoreData && this.redemptionCodeList.length > 0"
            class="no-more"
            >没有更多数据了</view
          >
        </view>
      </template>
    </scroll-view>

    <template v-if="current === 1">
      <view class="box margin30">
        <view class="title">采购兑换码</view>
        <view class="margin20">
          <view style="color: #333">{{ firstPackage.name }}</view>
          <view class="flex-between align-center margin10">
            <text>价格：{{ firstPackage.price }}元/年</text>
            <view class="custom-number-box">
              <view class="plus" @click="decreaseNumber('purchaseSpNumber')">
                <text class="symbol">-</text>
              </view>
              <input
                type="number"
                inputmode="numeric"
                v-model="purchaseSpNumber"
                disabled
              />
              <view class="plus" @click="increasebuy('purchaseSpNumber')">
                <text class="symbol">+</text>
              </view>
            </view>
          </view>
        </view>
        <!-- <view class="margin30">
          <view style="color: #333">{{ firwxction.name }}</view>
          <view class="flex-between align-center margin10">
            <text>价格：{{ firwxction.price }}元/年</text>
            <view class="custom-number-box">
              <view class="plus" @click="decreaseNumber('purchaseWxNumber')">
                <text class="symbol">-</text>
              </view>
              <input
                type="number"
                inputmode="numeric"
                v-model="purchaseWxNumber"
                disabled
              />
              <view class="plus" @click="increasebuy('purchaseWxNumber')">
                <text class="symbol">+</text>
              </view>
            </view>
          </view>
        </view> -->
        <view class="flex-between margin30">
          <view style="color: #333">总金额</view>
          <text style="font-weight: 600; font-size: 34rpx; color: #000"
            >￥{{ totalAmount }}</text
          >
        </view>
        <view class="btn margin20" @click="buyFun()">支付</view>
      </view>
    </template>
    <view class="popup" v-if="showPopup" @click="hideInput">
      <view class="popup-content" @click.stop>
        <input
          type="text"
          v-model="currentRemark"
          placeholder="请输入备注内容"
        />
        <view class="buttons">
          <view class="btn cancel" @click="hideInput">取消</view>
          <view class="btn confirm" @click="saveRemark">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
	data() {
		return {
			membershipPackages: [],
			firstPackage: null,
			firwxction: null,
			redemptionCodeSummary: {
				videoTotal: 0, // 可生成的视频兑换码个数
				wechatTotal: 0, // 可生成的微信兑换码个数
			},
			weChatRedemptionCode: 0,
			videoRedemptionCode: 0,
			totalRedemptionCodeLimit: 0,
			redemptionCode: {
				videoTotal: 0,
				wechatTotal: 0,
				videoUsed: 0,
				wechatUsed: 0,
			},

			tabs: [{ name: "生成兑换码" }, { name: "采购兑换码" }],
			current: 0,
			spNumber: 0,
			wxNumber: 0,
			totalNumber: 0,
			inputCode: "",
			showPopup: false,
			currentRemark: "",
			currentItem: null,
			isEmpty: false,
			redemptionCodeList: [],
			totalAmount: 0, // 总金额
			totalElements: 0, // 总记录数
			currentPage: 1, // 当前页码
			pageSize: 10, // 每页记录数
			loading: false, // 加载状态
			noMoreData: false, // 是否没有更多数据
			isGenerating: false,
			totalPages: 0,
			redemptionType: "全部",
			activeState: "全部",
			describe: "暂无",
			options1: [
				{ label: "全部", value: "全部" },
				{ label: "未使用", value: "未使用" },
				{ label: "已使用", value: "已使用" },
			],
			options2: [
				{ label: "全部", value: "全部" },
				{ label: "AI视频", value: "AI视频" },
				{ label: "AI微信", value: "AI微信" },
			],
			purchaseWxNumber: 0,
			purchaseSpNumber: 0,
		};
	},
	computed: {
		...mapState({
		  user: (state) => state.user,
		}),
	},
	onLoad() {
		this.loading = true;
		setTimeout(() => {
		  this.getRedemptionCode();
		  console.log("Page loaded");
		  this.getRedemptionCodeList();
		}, 500);
		this.getMembershipPackages();
		this.getRedemptionCodeSummary();
		console.log("redemptionCode", this.redemptionCode);
	},
  methods: {
    // 搜索兑换码
    async getSearchRedemptionCode() {
		const code = this.inputCode.trim();
			if (!code) {
			// 如果输入框为空，重新获取所有兑换码数据
			this.resetLoadState();
			await this.getRedemptionCodeList(true);
			return;
		}

		try {
			const res = await this.$request("/aiet-user-center/user/redemptionCode/search",{code: code}, "GET");
			if (res.code === 200) {
				if (res.data && res.data.length > 0) {
					this.redemptionCodeList = res.data; // 将查询结果放入兑换码列表中
					this.isEmpty = false; // 确保列表不为空
				} else {
					this.redemptionCodeList = []; // 清空列表
					this.isEmpty = true; // 设置为空状态
					this.describe = "未找到兑换码";
				}
			} else {
				this.$u.toast(res.msg);
				this.redemptionCodeList = []; // 清空列表
				this.isEmpty = true; // 设置为空状态
				this.describe = "查询失败";
			}
		} catch (error) {
			console.error("查询兑换码失败", error);
			this.$u.toast("查询兑换码失败");
			this.redemptionCodeList = []; // 清空列表
			this.isEmpty = true; // 设置为空状态
			this.describe = "查询失败";
		}
    },
    clearInput() {
      this.inputCode = "";
      this.getSearchRedemptionCode();
    },

    formatDateForIOS(dateString) {
      // 检查日期字符串是否为 null 或 undefined
      if (!dateString) {
        return null;
      }

      // 检查日期字符串是否已经符合 iOS 支持的格式
      if (dateString.includes("T")) {
        return dateString;
      }

      // 将日期字符串转换为 "yyyy-MM-ddTHH:mm:ss" 格式
      const [datePart, timePart] = dateString.split(" ");
      const [year, month, day] = datePart.split("-");
      const [hour, minute] = timePart.split(":");

      return `${year}-${month}-${day}T${hour}:${minute}:00`;
    },
	
    handleScrollToLower() {
		console.log("Scroll to lower triggered");
		if (!this.loading && !this.noMoreData) {
			this.loadMore();
		}
    },
	
    async loadMore() {
		console.log("loadMore triggered");
		this.loading = true; // 设置 loading 状态为 true
		this.currentPage += 1;
		await this.getRedemptionCodeList();
		this.loading = false; // 数据加载完成后设置 loading 状态为 false
    },
    // 兑换码统计列表
    async getRedemptionCodeSummary() {
		try {
			const creatorId = this.user.id;
			const res = await this.$request("/aiet-user-center/user/redemptionCode/summary",{creatorId},"GET");
			if (res.code === 200) {
				this.redemptionCodeSummary = res.data;
				this.videoRedemptionCode = res.data.videoTotal;
				this.weChatRedemptionCode = res.data.wechatTotal;
				this.totalRedemptionCodeLimit = res.data.videoTotal + res.data.wechatTotal;
			} else {
			  this.$u.toast(res.msg);
			}
		} catch (error) {
			console.error("获取兑换码统计信息失败", error);
		}
    },

    // 获取购买套餐列表
    async getMembershipPackages() {
		try {
			const res = await this.$request("/aiet-user-center/user/membership/getRedemptionCodeMemberShip", {}, "GET");
			if (res.code === 200) {
			  this.membershipPackages = res.data;
			  console.log("套餐信息", res.data);
			  this.firstPackage = res.data[0];
			  console.log("基础视频会员", this.firstPackage.name);
			} else {
			  this.$u.toast(res.msg);
			}
		} catch (error) {
			console.error("获取套餐信息失败", error);
		}
    },
    // 备注输入框弹窗
    showInput(item) {
		this.currentItem = item;
		this.currentRemark = item.remark || "";
		this.showPopup = true;
		uni.setPageStyle({
			style: {
			  overflow: "hidden",
			},
		});
    },
    hideInput() {
		this.showPopup = false;
		uni.setPageStyle({
			style: {
			  overflow: "auto",
			},
		});
    },
    async saveRemark() {
		if (this.currentItem) {
			const { id } = this.currentItem;
			const remark = this.currentRemark;
			try {
				const res = await this.$request("/aiet-user-center/user/redemptionCode/saas/remark", {id, remark}, "POST");
				if (res.code === 200) {
					this.currentItem.remark = remark;
					this.$u.toast("备注保存成功");
				} else {
					this.$u.toast(res.msg);
				}
			} catch (error) {
				console.error("保存备注失败", error);
				this.$u.toast("保存备注失败");
			}
		}
		this.hideInput();
    },
    async change(e) {
		this.current = e;
		this.resetLoadState(); // 重置加载状态和当前页码
		await this.getRedemptionCodeList(); // 重新加载数据
		// 清空列表
		// this.redemptionCode = [];
		// 重新获取
		this.getRedemptionCode();
    },
    resetLoadState() {
		this.loading = false;
		this.noMoreData = false;
		this.currentPage = 1;
    },
    // 购买兑换码的减号
    decreaseNumber(type) {
		const that = this;
		if (type === "purchaseSpNumber") {
			if (that.purchaseSpNumber > 0) {
			  that.purchaseSpNumber -= 1;
			  that.updateTotalAmount();
			} else {
			  that.$u.toast("数量不能为负数");
			}
		} else if (type === "purchaseWxNumber") {
			if (that.purchaseWxNumber > 0) {
			  that.purchaseWxNumber -= 1;
			  that.updateTotalAmount();
			} else {
			  that.$u.toast("数量不能为负数");
			}
		}
    },
    // 视频兑换码减号
    decreaseNumberSp(type) {
		const that = this;
		if (type === "spNumber") {
			if (that.spNumber > 0) {
			  that.spNumber -= 1;
			  // 更新可用的视频兑换码额度
			  that.redemptionCode.videoTotal += 1;
			  // 更新总的可使用兑换码额度
			  that.totalRedemptionCodeLimit += 1;
			} else {
			  that.$u.toast("数量不能为负数");
			}
		}
    },
    // 微信兑换码减号
    decreaseNumberWx(type) {
		const that = this;
		if (type === "wxNumber") {
			if (that.wxNumber > 0) {
			  that.wxNumber -= 1;
			  // 更新可用的微信兑换码额度
			  that.redemptionCode.wechatTotal += 1;
			  // 更新总的可使用兑换码额度
			  that.totalRedemptionCodeLimit += 1;
			} else {
			  that.$u.toast("数量不能为负数");
			}
		} else if (type === "wxNumber") {
			if (that.wxNumber > 0) {
				that.wxNumber -= 1;
			} else {
				that.$u.toast("数量不能为负数");
			}
		}
    },
    // 点击视频额度加号，判断是否还有可用额度
    increaseSp(type) {
		const that = this;
		if (type === "spNumber") {
			// 获取当前可用的视频兑换码额度
			const availableVideoQuota = that.redemptionCode.videoTotal;

			// 如果可用额度大于0，则增加视频兑换码数量
			if (availableVideoQuota > 0) {
				that.spNumber += 1;
				// 更新可用的视频兑换码额度
				that.redemptionCode.videoTotal -= 1;
				// 更新总的可使用兑换码额度
				that.totalRedemptionCodeLimit -= 1;
			} else {
			  that.$u.toast("视频兑换码数量已达上限");
			}
		}
    },
    increaseWx(type) {
		const that = this;
		if (type === "wxNumber") {
			// 获取当前可用的微信兑换码额度
			const availableWxQuota = that.redemptionCode.wechatTotal;
			if (availableWxQuota > 0) {
			  that.wxNumber += 1;
			  // 更新可用的微信兑换额度
			  that.redemptionCode.wechatTotal -= 1;
			  // 更新总的可使用兑换码额度
			  that.totalRedemptionCodeLimit -= 1;
			} else {
			  that.$u.toast("微信兑换码数量已达上限");
			}
		}
    },
    // 购买兑换码的加号
    increasebuy(type) {
		const that = this;
		if (type === "purchaseSpNumber") {
			that.purchaseSpNumber++;
			// 更新总金额
			that.updateTotalAmount();
		}
    },
    // 更新总金额
    updateTotalAmount() {
		const totalSpAmount = this.purchaseSpNumber * this.firstPackage.price;
		this.totalAmount = totalSpAmount;
    },

    // 获取兑换码统计
    async getRedemptionCode() {
		const res = await this.$request("/aiet-user-center/user/redemptionCode/summary", {creatorId: this.user.id}, "GET");
		if (res.code === 200) {
			this.redemptionCode = res.data;
			this.redemptionCode = {
				videoTotal: res.data.video || 0, // 可使用视频兑换码数量
				wechatTotal: res.data.wechat || 0, // 可使用微信兑换码数量
				videoUsed: res.data.videoUsed || 0, // 已创建视频兑换码数量
				wechatUsed: res.data.wechatUsed || 0, // 已创建微信兑换码数量
				redemptionCodeNumTotal: res.data.redemptionCodeNum || 0, // 兑换码额度总数
				videoRedemptionCodeLimit: res.data.videoTotal || 0, // 视频兑换码额度
				wechatRedemptionCodeLimit: res.data.wechatTotal || 0, // 微信兑换码额度
			};
			let total = res.data.redemptionCodeNum - (res.data.wechatTotal + res.data.videoTotal);
			this.totalNumber = total > 0 ? total : 0;
		}
    },

    // 获取兑换码列表
    async getRedemptionCodeList(reset = false) {
		if (reset) {
			this.resetLoadState();
		}
		const page = this.currentPage - 1; // 后端分页通常从0开始
		const size = this.pageSize;

		try {
			const res = await this.$request("/aiet-user-center/user/redemptionCode/list", {
				creatorId: this.user.id,
				used: this.activeState === "全部" ? "" : this.activeState === "未使用" ? false : true,
				type: this.redemptionType === "全部" ? "" : this.redemptionType === "AI微信" ? "AI_WECHAT" : "AI_VIDEO",
				page: page,
				size: size,
			  },"GET");

        if (res.code === 200) {
          console.log("返回的数据", res.data);
          const newData = res.data.content || []; // 确保 redemptionCodeList 是一个数组
          if (this.currentPage === 1) {
            this.redemptionCodeList = newData; // 如果是第一页，直接赋值
          } else {
            this.redemptionCodeList = [...this.redemptionCodeList, ...newData]; // 合并新数据
          }
          this.totalElements = res.data.page.totalElements; // 获取总记录数
          this.totalPages = res.data.page.totalPages; // 获取总页数
          console.log("总页数", this.totalPages);

          this.isEmpty = this.redemptionCodeList.length === 0; // 检查 content 是否为空
          this.describe =
            "暂无" + this.redemptionType + this.activeState + "兑换码";

          // 检查是否没有更多数据
          if (this.currentPage >= this.totalPages) {
            this.noMoreData = true;
          }

          // 处理日期格式
          this.redemptionCodeList.forEach((item) => {
            const formattedDateString = this.formatDateForIOS(item.usedTime);
            const date = new Date(formattedDateString);
            if (!isNaN(date.getTime())) {
              const year = date.getFullYear();
              const month = String(date.getMonth() + 1).padStart(2, "0");
              const day = String(date.getDate()).padStart(2, "0");
              const hours = String(date.getHours()).padStart(2, "0");
              const minutes = String(date.getMinutes()).padStart(2, "0");
              const seconds = String(date.getSeconds()).padStart(2, "0");

              item.usedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            } else {
              console.error("Invalid date:", item.usedTime);
            }
          });

          // 处理其他字段
          this.redemptionCodeList.forEach((item) => {
            item.usedName = item.usedName;
            item.remark = item.remark;
          });

          console.log("获取兑换码列表", this.redemptionCodeList);
        }

        this.loading = false;
      } catch (error) {
        console.error("获取兑换码列表失败", error);
        this.loading = false; // 确保在错误情况下也将 loading 设置为 false
      }
    },

    // 生成兑换码
    async generateRedemptionCode() {
      if (this.spNumber < 1 && this.wxNumber < 1) {
        return this.$u.toast("请选择生成数量");
      }

      // 禁用按钮
      this.isGenerating = true;

      try {
        const res = await this.$request(
          "/aiet-user-center/user/redemptionCode",
          {
            aiVideo: this.spNumber,
            aiWechat: this.wxNumber,
          },
          "POST"
        );

        if (res.code === 200) {
          this.$u.toast("生成兑换码成功");

          // 更新兑换码统计和列表
          this.getRedemptionCode();
          this.getRedemptionCodeList();
          this.spNumber = 0;
          this.wxNumber = 0;
        } else {
          this.$u.toast(res.msg);
        }
      } catch (error) {
        console.error("生成兑换码失败", error);
        this.$u.toast("生成兑换码失败");
      } finally {
        // 重新启用按钮
        this.isGenerating = false;
      }
    },

    // 立即付款
    async buyFun() {
      if (this.purchaseSpNumber === 0 && this.purchaseWxNumber === 0)
        return this.$u.toast("请选择购买数量");
      uni.showLoading();
      // 计算总金额
      const totalAmount =
        this.purchaseSpNumber * this.firstPackage.price;
      const res = await this.$request(
        "/aiet-user-center/user/orders/wxPay",
        {
          productName:
            "购买" +
            this.purchaseSpNumber +
            "个视频兑换码和" +
            this.purchaseWxNumber +
            "个微信兑换码",
          orderAmount: totalAmount,
          // orderAmount: 0.01,
          platform: "数字人-H5",
          productType: 3,
          videoRedemptionCodeNum: this.purchaseSpNumber,
          // wechatRedemptionCodeNum: this.purchaseWxNumber,
          manufacturer: 1,
        },
        "POST",
        "application/json"
      );
      if (res.code === 200) {
        console.log(res.data);
        uni.hideLoading();
        let payment = res.data;
        let that = this;
        uni.requestPayment({
          timeStamp: payment.timeStamp,
          nonceStr: payment.nonceStr,
          package: payment.package,
          signType: payment.signType,
          paySign: payment.paySign,
          success(payRes) {
            that.$u.toast("充值成功");
            that.getPoint();
            that.quantity = "";
          },
          fail(payErr) {
            console.log("支付失败", payErr);
          },
        });
      } else {
        uni.hideLoading();
        this.$u.toast(res.msg);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.u-dropdown__content__mask {
  background: transparent !important;
}
.tabVue {
  width: 690rpx;
}
.box {
  width: 690rpx;
  padding: 30rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
    inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
  .title {
    color: #000;
    font-weight: 600;
  }
  .btn {
    width: 100%;
    height: 80rpx;
    background: #FFA0A0;
    line-height: 80rpx;
    text-align: center;
    color: #fff;
    font-size: 30rpx;
    border-radius: 12rpx;
  }
}
.info {
  width: 330rpx;
  height: 140rpx;
  border-radius: 12rpx;
  background: #fff;
  box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
    inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
}
.section {
  width: 100%;
  padding: 30rpx;
  background: #fff;
  border-radius: 12rpx;

  .label {
    font-weight: 600;
    font-size: 32rpx;

    text {
      color: #9ea7a8;
    }
  }
  input {
    font-size: 28rpx;
    padding-left: 20rpx;
  }
  .searchVue {
    width: 100%;
    height: 80rpx;
    background: #f5f5f5;
    border-radius: 40rpx;
  }
  .item {
    width: 100%;
    .copy {
      margin-left: 10rpx;
      margin-left: 15rpx;
      font-size: 26rpx;
    }

    .name {
      font-weight: 600;
      color: #000;
      font-size: 28rpx;
      line-height: 1;
    }

    .redemptionWeChatLabel {
      padding: 6rpx 10rpx;
      font-size: 20rpx;
      background-color: #FFA0A0;
      border-radius: 6rpx;
      color: #ffffff;
      margin-right: 12rpx;
    }

    .redemptionVideoLabel {
      padding: 6rpx 10rpx;
      font-size: 20rpx;
      background-color: #FFA0A0;
      border-radius: 6rpx;
      color: #ffffff;
      margin-right: 12rpx;
    }

    .state {
      position: absolute;
      right: -28rpx;
      top: 6%;
      transform: rotate(45deg);
      background-color: #FFA0A0;
      color: #fff;
      padding: 4rpx 30rpx;
      border-radius: 4rpx;
      font-size: 20rpx;
      &.used {
        background-color: #FFA0A0;
        color: #fff;
      }

      &.unused {
        background-color: #f5f5f5;
        color: #000;
      }
    }

    .phone {
      line-height: 1;
      color: #333;
      padding-top: 15rpx;
    }
  }
}
.custom-number-box {
  display: flex;
  align-items: center;
  input {
    min-height: auto !important;
    width: 60rpx;
    height: 42rpx;
    text-align: center;
    background-color: #f2f3f5;
    border-radius: 4rpx;
    margin: 0 10rpx;
  }
}
.plus {
  width: 60rpx;
  height: 44rpx;
  background: #f2f3f5;
  color: #fff;
  border: none;
  border-radius: 4rpx;
  font-size: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.symbol {
  color: #968d86;
  font-size: 35rpx;
  padding: 0 10rpx; /* 根据需要调整padding */
  text-align: center;
}
.establish {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}
.text-item {
  margin: 0 5px;
  padding-bottom: 10px;
}
.notes {
  display: flex;
  align-items: center;
  padding: 0px 0 15px 15px;
}
.textremarks {
  max-width: 80%; /* 限制备注内容的宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle; /* 使备注内容与图标垂直对齐 */
}
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;

  .popup-content {
    width: 80%;
    background: #fff;
    padding: 50rpx;
    border-radius: 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    input {
      width: 55%;
      height: 65rpx;
      border: 1px solid #f1f1f1;
      border-radius: 8rpx;
      padding: 0 20rpx;
      margin-bottom: 20rpx;
    }

    .buttons {
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;

      .btn {
        width: 45%;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 8rpx;
        font-size: 30rpx;
      }

      .cancel {
        background: #ccc;
        color: #fff;
        border-radius: 12rpx;
        height: 55rpx;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        width: 130rpx;
        margin-right: 40rpx;
      }

      .confirm {
        background: #FFA0A0;
        color: #fff;
        border-radius: 12rpx;
        height: 55rpx;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        width: 130rpx;
        margin-left: 40rpx;
      }
    }
  }
}
.card {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
    inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
}
.loading,
.no-more {
  text-align: center;
  margin: 10px 0;
}
.page {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置页面高度为视口高度 */
}
.scroll-container {
  overflow-y: auto; /* 启用垂直滚动 */
}
.search-input {
  flex: 1; /* 让输入框占据剩余空间 */
  position: relative;
}

.search-input .u-input__suffix {
  position: absolute;
  right: 10px; /* 调整清空按钮的位置 */
  top: 50%;
  transform: translateY(-50%);
}
</style>
